<template>
    <div class="reserve">
      <div class="header">
        <img src="@/assets/images/return.png" class="header_img" @click="goBack"/>
        <div class="title">预约信息</div>
      </div>
        <div class="reserve_top_info">
            <p>
                <span>
                    <em>{{ totalTime }}</em>&nbsp;小时
                </span>
                <span>总工作时长</span>
            </p>
            <p>
                <span>
                    <em>{{ totalMoney }}</em>&nbsp;元
                </span>
                <span>
                    开发金额
                    <i @click="showNoteFun()"></i>
                </span>
            </p>
        </div>

        <div class="reserve_info_wrap">
            <p @click="showWorkPeriodPopFun">
                <span>工作时长</span>
                <span>{{ WorkPeriodDay }}天{{ WorkPeriodHours }}小时</span>
                <img src="../../assets/images/rightArrow@2x.png" alt="">
            </p>

            <div class="workPeriodPop mask" v-show="showWorkPeriodPop" @click="hideWorkPeriodPopFun">
                <mt-picker :slots="WorkPeriodSlots" @change="onWorkPeriodValuesChange"></mt-picker>
            </div>

            <p>
                <span>开始时间</span>
                <span>
                    <span v-text="startDate"></span>
                    <input v-model="startDate" type="date">
                </span>
                <img src="../../assets/images/rightArrow@2x.png" alt="">
            </p>
            <p>
                <span>交付时间</span>
                <span>
                    <span v-text="endDate"></span>
                    <input v-model="endDate" type="date">
                </span>

                <img src="../../assets/images/rightArrow@2x.png" alt="">
            </p>
            <p @click="showWorkAddressPopFun">
                <span>工作地点</span>
                <span>{{ workAddress }}</span>
                <img src="../../assets/images/rightArrow@2x.png" alt="">
            </p>

            <div class="workAddressPop mask" v-show="showWorkAddressPop" @click="hideWorkAddressPopFun">
                <mt-picker :slots="WorkAddressSlots" @change="onWorkAddressValuesChange"></mt-picker>
            </div>

            <div class="work_des">
                <p><span>工作说明</span><button @click="showWorkTemplateFun()">参考模板</button></p>
                <textarea name="" id="" cols="30" rows="8" v-model="workDes" placeholder="说明应该包括：任务需求描述、技能要求、验收标准等。描述越详细越有助于提高预约成功率、避免出现纠纷。（不得少于50个字）">
                </textarea>
            </div>

            <p>
                <span>附件</span>
                <span class="upload_wrap">
                    <button>上传附件</button>
                    <input ref="files" multiple v-change="files" type="file">
                </span>
            </p>
        </div>

        <div class="note_wrap">
            <p>温馨提示</p>
            <p>1、开发者确认订单后，才需要托管费用</p>
            <p>2、提交预约即表示你同意
                <!-- <router-link>《工作规则》</router-link> -->
                </p>
        </div>
        <!-- <form action=" " style="height:2px;overflow:hidden;opacity:0;">
            <input v-model="totalTime" type="text" name="workLength">
            <input v-model="startDate"  type="text" name="startTime">
            <input v-model="endDate"  type="text" name="deliveryTime">
            <input v-model="workAddress"  type="text" name="workPlace">
            <textarea v-model="workDes"  name="workDesc" cols="30" rows="8"></textarea>
            <input v-model="userId"  type="text" name="programmerID">
            <input v-model="createUserID"  type="text" name="createUserID">
            <input v-change="files"  type="file">
            <button refs="submit" type="submit"></button>
        </form> -->

        <button class="reserve_btn" @click="submitFun">预约</button>

        <mt-popup v-model="showWorkTemplate" popup-transition="popup-fade">
            <h5>工作说明模板</h5>
            <p>任务需求</p>
            <p>1、完成一个XX程序\/为产品开发XX功能\/解决XX技术问题</p>
            <p>2、具体需要实现XX功能点，要求...</p>
            <p class="line">____________________________</p>
            <p>技能要求</p>
            <p>1、需要熟练XX语言、XX框架</p>
            <p>2、有过开发XX项目的经验...</p>
            <p class="line">____________________________</p>
            <p>验收标准</p>
            <p>1、能实现XX功能\/达到预期效果</p>
            <p>2、程序正常运行，无明显影响使用的BUG</p>
            <p>3、关键代码有注释...</p>
        </mt-popup>

        <mt-popup v-model="showNote" popup-transition="popup-fade">
            <p>包含7%服务费</p>
        </mt-popup>

    </div>
</template>

<script>
import Moment from "moment";
import {addClass,removeClass} from '@/assets/js/dom'

    export default {
        name:'reserve',
        data() {
            return {
                htmlDom:'',
                userId:'16',
                createUserID:'1',  //当前用户ID
                flag:false,
                showNote:false,             //显示开发金额说明
                showWorkTemplate:false,     //显示工作说明模板
                showWorkPeriodPop:false,
                showWorkAddressPop:false,
                WorkPeriodDay:0,
                WorkPeriodHours:0,
                totalTime:0,
                totalMoney:0,
                workPrice:'',
                workPeriodVal:"",
                startDate:"",
                endDate:"",
                workAddress:"",
                workDes:"",
                files:'',
                WorkPeriodSlots: [
                    {
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'center',
                    defaultIndex:1
                    }, {
                    divider: true,
                    content: '天',
                    className: 'slot2'
                    }, {
                    flex: 1,
                    values: ['0','1', '2', '3', '4', '5', '6', '7'],
                    className: 'slot3',
                    textAlign: 'center',
                    defaultIndex:0
                    }, {
                    divider: true,
                    content: '小时',
                    className: 'slot2'
                    }
                ],
                WorkAddressSlots: [
                    {
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'center',
                    defaultIndex:0
                    }
                ]


            }
        },
        created() {
            this.htmlDom = document.getElementsByTagName('html')[0];
            // 初始化工作时间天数信息
            this.dayArr();
            // 获取该程序员的基本信息
            this.userId = this.$route.params.id;
            this.$Axios.get(`/api/user/userInfo/${this.userId}`).then((res)=>{
                this.workPrice = res.data.proInfoDetail.detailTop.price;
                // 初始化时间价钱显示
                this.totalTime = 8;
                this.totalMoney = (this.totalTime/8)*this.workPrice*1.07;
            }).catch((err)=>{
                console.log(err,"获取基本信息有误！")
            })

            this.startDate =  Moment().format("YYYY-MM-DD");
            this.endDate =  Moment().format("YYYY-MM-DD");
            // 初始化工作地点信息
            this.WorkAddressSlots[0].values = ['远程','北京','上海','广州','深圳','杭州','南京','西安','成都'];
        },
        methods: {
            dayArr(){
                for(let i=0;i<366;i++){
                    this.WorkPeriodSlots[0].values.push(i);
                }
            },
            showNoteFun(){
                this.showNote = !this.showNote;
            },
            // 显示隐藏工作时间picker
            showWorkPeriodPopFun(){
                addClass(this.htmlDom, 'noscroll');
                this.showWorkPeriodPop = !this.showWorkPeriodPop;
            },
            hideWorkPeriodPopFun(){
                removeClass(this.htmlDom, 'noscroll');
                this.showWorkPeriodPop = false;
            },
            // 显示隐藏工作地点picker
            showWorkAddressPopFun(){
                addClass(this.htmlDom, 'noscroll');
                this.showWorkAddressPop = !this.showWorkAddressPop;
            },
            hideWorkAddressPopFun(){
                removeClass(this.htmlDom, 'noscroll');
                this.showWorkAddressPop = false;
            },
            // 选择工作时间，总价格联动
            onWorkPeriodValuesChange(picker, values) {
                // 选择工作时间，总价格联动
                this.WorkPeriodDay = parseInt(picker.getValues()[0]);
                this.WorkPeriodHours = parseInt(picker.getValues()[1]);
                this.totalTime = this.WorkPeriodDay*8 + this.WorkPeriodHours;
                this.totalMoney = Math.ceil((this.totalTime/8)*this.workPrice*1.07);
            },
            // 选择工作地点
            onWorkAddressValuesChange(picker, values) {
                this.workAddress = picker.getValues()[0];

            },
            // 显示工作说明模板
            showWorkTemplateFun(){
                this.showWorkTemplate = !this.showWorkTemplate;
            },
            // 提交预约信息
            submitFun(){
                let myFormData = new FormData();
                myFormData.append("workLength",this.totalTime);
                myFormData.append("startTime",this.startDate);
                myFormData.append("deliveryTime",this.endDate);
                myFormData.append("workPlace",this.workAddress);
                myFormData.append("workDesc",this.workDes);
                myFormData.append("files",this.$refs.files.files[0],'files');
                myFormData.append("programmerID",this.userId);
                myFormData.append("createUserID",'1');
                // console.log(this.$refs.files.files[0]);
                let config = {
		          headers: {'Content-Type': 'multipart/form-data'}
                };
                
                if(this.flag === false){
                    console.log(111)
                    this.flag === true;
                    this.$Axios.post(`api/user/addAppointment`,myFormData,config).then((res)=>{
                        if(res.data.code === 0){
                            this.$toast("预约成功！")
                            this.flag === false;
                        }
                    }).catch((err)=>{
                        console.log(err,"保存信息异常");
                        this.flag === false;
                    })
                }
            },
            goBack(){
                this.$router.go(-1);
            },
        },

    }
</script>

<style scoped lang="scss">
  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
    .header_img {
      width: 17px;
      height: 30px;
    }
    .title {
      text-align: center;
      flex: 1;
      font-size: 30px;
      color: #ffff;
    }
  }
$basecolor:#fff;
$color1:#8DC43D;
$color2:#FB9427;
$color3:#2B2B2B;
$color4:#555;
$color5:#999;
$bdashed:1px dashed #b9b9b9;
.reserve_top_info{
    padding:40px 0;
    display: flex;
    background: #fff;
    p{
        flex: 1;
        text-align: center;
        font-size: 28px;
        span{
            color: $color2;
            padding-bottom: 30px;
            display: block;
            em{
                font-size: 54px;

            }
            i{
                display: inline-block;
                width: 28px;
                height: 28px;
                background: url('../../assets/images/question@2x.png') 0 0 no-repeat;
                background-size: contain;
            }
            &:last-child{
                color: $color3;
                font-size: 34px;
            }
        }
    }
}
.reserve_info_wrap{
    margin-top: 20px;
    padding:30px;
    background: #fff;
    p{
        font-size: 28px;
        color: $color3;
        display: flex;
        height: 90px;

        border-bottom: 1px solid #F8F8F8;
        align-items: center;
        span{
            flex: 2;
            text-align: left;
            font-size: 32px;
            color: $color3;
            &:nth-child(2){
                text-align: right;
                color: $color5;
                position:relative;
                input{
                    position:absolute;
                    top:-20px;
                    left:0;
                    flex: 2;
                    width: 100%;
                    height: 80px;
                    text-align: right;
                    opacity: 0;
                    z-index: 33;
                }
            }
        }
        img{
            width: 14px;
            height: 24px;
            margin-left: 20px;
        }
        button{
            color: $color1;
            background: none;
        }
        .upload_wrap{
            position: relative;
            button{
                position: absolute;
                right: 0;
                top:50%;
                transform: translate(0,-50%);
                width: 170px;
                height: 90px;
                font-size: 28px;
                background: none;
                color: $color1;
            }
            input{
                position: absolute;
                right: 0;
                top:50%;
                transform: translate(0,-50%);
                width: 170px;
                height: 90px;
                opacity: .000001;
            }
        }
    }
    .work_des{
        font-size: 28px;
        p{
            span{
                display: block;
                height: 90px;
                line-height: 90px;
            }
            button{
                font-size: 28px;
                color: $color1;
                background: none;
            }
        }

        textarea{
            display: block;
            padding:30px 10px;
            width: 100%;
            font-size: 28px;
            resize: 1;
            outline: none;
            border-bottom: 1px solid #F8F8F8;
        }
    }
}
.note_wrap{
    padding:30px;
    font-size: 28px;
    color: $color5;
    padding-bottom: 120px;
}
.reserve_btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    background: $color1;
    color: #fff;
    font-size: 30px;
}
.mask{
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    .picker{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width: 60%;
        padding:30px 60px;
        font-size: 24px;
        border-radius: 10px;
        background: #fff;
    }
}
</style>
